<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>账户明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plugins/mui/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/my/fund/index.css"/>
    <script src="../../js/statistics.js"></script>
    <script src="../../js/fontset.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">账户明细</h1>
</header>
<div class="mui-content found-detail">
	<div class="mui-segmented-control">
	    <a class="mui-control-item" href="#entire" id="tab-entire">
	    	<span>全部</span>
	    </a>
	    <a class="mui-control-item" href="#deposite" id="tab-deposite">
	    	<span>缴存</span>
	    </a>
	    <a class="mui-control-item" href="#extract" id="tab-extract">
	    	<span>提取</span>
	    </a>
	</div>
	
	<div class="detail-box">
		<div class="title"></div>
		<div id="entire" class="mui-control-content">
			
		</div>
		<div id="deposite" class="mui-control-content">
		</div>
		<div id="extract" class="mui-control-content">
			
		</div>
	</div>
	<div class="detail-foot">
		只能查询当年的明细记录
	</div>	
</div>	

<script type="text/javascript" src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../plugins/mui/mui.min.js"></script>
<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script src="../../plugins/template/template.js" ></script>
<script src="../../js/life_housekeeper/windowTitleView.js"></script>
<script type="text/html" id="entireTpl">
	<ul class="mui-table-view">
		{{each acc_info as item i}}
		{{if item.sr && item.hjny}}
		<li class="mui-table-view-cell" data-options='{{item | obj}}'>
		{{else}}
		<li class="mui-table-view-cell">
		{{/if}}
        	<div class="cell-item-tit">
        		{{if item.hjny}}
        		<span class="tit-date">{{item.hjny | monthFormat}}月</span>
        		{{else if item.qrrq}}
        		<span class="tit-date">{{item.qrrq | monthFormat}}月</span>
        		{{/if}}
        		<span class="tit-money">{{item.ye}}</span>
        	</div>
            <div class="cell-item">
            	{{if item.sr}}
            	<p><span>{{item.cllxname}}</span><span>+{{item.sr}}</span></p>
            	{{else if item.zc}}
            	<p><span>{{item.cllxname | nameFormat}}</span><span>-{{item.zc}}</span></p>
            	{{/if}}
        	</div>
        </li>
        {{/each}}
   </ul>
</script>
<script type="text/html" id="depositeTpl">
	<div class="title"></div>
	<ul class="mui-table-view">
		{{each acc_info as item i}}
		{{if item.sr && item.hjny}}
        <li class="mui-table-view-cell" data-options='{{item | obj}}'>
        	<div class="cell-item-tit">
        		{{if item.hjny}}
        		<span class="tit-date">{{item.hjny | monthFormat}}月</span>
        		{{else if item.qrrq}}
        		<span class="tit-date">{{item.qrrq | monthFormat}}月</span>
        		{{/if}}
        		<span class="tit-money">{{item.ye}}</span>
        	</div>
            <div class="cell-item">           	
            	<p><span>{{item.cllxname}}</span><span>+{{item.sr}}</span></p>
        	</div>
        </li>
        {{/if}}
        {{/each}}
   </ul>
   
</script>
<script type="text/html" id="extractTpl">
	<ul class="mui-table-view">
		{{each acc_info as item i}}
		{{if item.zc}}
        <li class="mui-table-view-cell">
        	<div class="cell-item-tit">
        		{{if item.qrrq}}
        		<span class="tit-date">{{item.qrrq | monthFormat}}月</span>
        		{{/if}}
        		<span class="tit-money">{{item.ye}}</span>
        	</div>
            <div class="cell-item">	
            	<p><span>{{item.cllxname | nameFormat}}</span><span>-{{item.zc}}</span></p>	
        	</div>
        </li>
        {{/if}}    	
        {{/each}}
   </ul>
</script>
<script type="text/javascript">
	mui.init();
	mui.plusReady(function(){
		var self = plus.webview.currentWebview(),
			time = self.time,
			type = self.type,
			spcode = self.spcode;
		if(type){
			$('.mui-control-content').removeClass('mui-active').siblings('#'+type).addClass('mui-active');
			$('.mui-control-item').removeClass('mui-active').siblings('#tab-'+type).addClass('mui-active');
		}else{
			$('.mui-control-content')[0].addClass('mui-active');
			$('.mui-control-item')[0].addClass('mui-active');
		}
		template.helper('obj',function(o){
			return JSON.stringify(o);
		});	
		template.helper('nameFormat',function(name){
			if(name){
				var c =  name.split('-');
				return c[0];
			}	
		});	
		template.helper('monthFormat',function(month){
			if(month){
				if(month.length > 7){
					var dMonth= month.substring(5,7);
					return parseInt(dMonth);
				}else{
					var sMonth = month.slice(-2);
					return parseInt(sMonth);
			 	}	
			}
		});
		plus.nativeUI.showWaiting();

		myAjax('home/provident/getPaymentInfo','post',{
			spcode:spcode,
			jcnf:time,
			ywlx:1
		},function(e){
			plus.nativeUI.closeWaiting();
			if(e.code == 0){
				if(!e.data.body || e.data.body == ''){
					return;
				}
				var jcInfo = e.data.body.list;
				//console.log(JSON.stringify(jcInfo));
				var entire = document.getElementById("entire"),
					extract = document.getElementById("extract"),
					deposite = document.getElementById("deposite"),
					entireHtml = template('entireTpl',jcInfo),
					extractHtml = template('extractTpl',jcInfo),
					depositeHtml = template('depositeTpl',jcInfo);
					document.querySelectorAll('.detail-box .title')[0].innerHTML = time;
					entire.innerHTML = entireHtml;
					deposite.innerHTML = depositeHtml;
					extract.innerHTML = extractHtml;
				mui('.detail-box').on('tap','li',function(e){
					var _this = this,
						options = _this.getAttribute('data-options');
					if(!options){
						return;
					}
					options = JSON.parse(options);
					var viewOptions = {
						url:'fund-detail-card.html',
						id:'fund-detail-card'
					},
					extras ={
						detailInfo:options
					},
					titleOptions = {
						backImg:'whiteBack'
					};
					addTitleView(viewOptions,extras,titleOptions);
				})
					
			}else{
				mui.toast(e.message);
			}
		});
	})

</script>
</body>
</html>
